<template>
  <div>
    <van-tabbar v-model="active" route>
      <van-tabbar-item to="/index">
        <span>首页</span>
        <template #icon="props">
          <img
            :src="
              props.active
                ? 'http://10.31.169.37:3000/images/index/首页 拷贝.png'
                : 'http://10.31.169.37:3000/images/index/首页.png'
            "
          />
        </template>
      </van-tabbar-item>
      <van-tabbar-item icon="search" to="/chat">
        <span>聊</span>
        <template #icon="props">
          <img
            :src="
              props.active
                ? 'http://10.31.169.37:3000/images/index/聊 拷贝.png'
                : 'http://10.31.169.37:3000/images/index/聊.png'
            "
          />
        </template>
      </van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="/customization">
        <span>定制</span>
        <template #icon="props">
          <img
            :src="
              props.active
                ? 'http://10.31.169.37:3000/images/index/定制 拷贝.png'
                : 'http://10.31.169.37:3000/images/index/定制.png'
            "
          />
        </template>
      </van-tabbar-item>
      <van-tabbar-item icon="setting-o" to="/mypage/index">
        <span>我的</span>
        <template #icon="props">
          <img
            :src="
              props.active
                ? 'http://10.31.169.37:3000/images/index/我的 拷贝.png'
                : 'http://10.31.169.37:3000/images/index/我的.png'
            "
          />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { Tabbar, TabbarItem } from "vant";
export default {
  data() {
    return {
      active: 0,
    };
  },
  activated() {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
  components: {
    VanTabbar: Tabbar,
    VanTabbarItem: TabbarItem,
  },
};
</script>
<style lang="less" scoped></style>
